<template>
	<view class="content">
		<view class="sectino-0">
			<view class="address-wrap">
				<view class="iconfont icon-address"></view>
				<text class="text">{{curAddress}}</text>
			</view>
		</view>
		
		<view class="project-wrap">
			<view class="pro-left">
				<view class="pro-name">
					<text v-if="curProject.project_name"><!-- {{projectList[selectedProject[0]].project_name}} -->{{curProject.project_name}}</text>
					<view v-if="curProject.recommend">推荐</view>
				</view>
				<view class="pro-address-wrap">
					<view class="iconfont icon-addresss"></view>
					<text class="text" v-if="Object.keys(curProject).length">
						{{curProject.xmb_address}}
					</text>
				</view>
			</view>
			<view class="pro-right" @click="go('/pages/common/project_select/index?id=' + recommendId)">
				<view class="iconfont icon-qiehuan"></view>
				<text>切换项目</text>
			</view>
		</view>
		<div class="tab-outside">
			<view class="tab-img-wrap">
				<!-- 项目中心 start -->
				<view v-if="curRole === '中心专职'" class="tab-img" @click="go('/pages/work/center/manage/index', true)">
					<image src="../../../src/imgs/work-center-tab5.png" alt="" mode="aspectFit"/>
				</view>
				<view v-if="curRole === '项目经理'" class="tab-img" @click="go('/pages/work/manager/index', true)">
					<image src="../../../src/imgs/work-center-tab6.png" alt="" mode="aspectFit"/>
				</view>
				<!-- 项目中心 end -->
				<!-- 现场履职 start -->
				<view class="tab-img" @click="go('/pages/work/manager/work_manage/duty/index', true)">
					<image src="../../../src/imgs/work-center-tab1.png" alt="" mode="aspectFit"/>
				</view>	
				<!-- 现场履职 end -->
				<!-- 巡查 start -->
				<view v-if="curRole === '中心专职'" class="tab-img" @click="go('/pages/work/manager/work_manage/check/index?type=center', true)">
					<image src="../../../src/imgs/work-center-tab2.png" alt="" mode="aspectFit"/>
				</view>
				<view  v-if="curRole === '项目经理'" class="tab-img" @click="go('/pages/work/manager/work_manage/check/index?type=manager', true)">
					<image src="../../../src/imgs/work-center-tab2.png" alt="" mode="aspectFit"/>
				</view>
				<view  v-if="curRole === '部门主任'" class="tab-img" @click="go('/pages/work/manager/work_manage/check/index?type=center', true)">
					<image src="../../../src/imgs/work-center-tab2.png" alt="" mode="aspectFit"/>
				</view>
				<!-- 巡查 end -->
				<!-- /pages/work/manager/work_manage/check/index -->
				<!-- 远程会议 start -->
				<view class="tab-img" @click="go('/pages/work/manager/work_manage/meeting/index', true)">
					<image src="../../../src/imgs/work-center-tab4.png" alt="" mode="aspectFit"/>
				</view>
				<view class="tab-img" @click="go('/pages/work/center/scene/index', true)">
					<image src="../../../src/imgs/work-center-tab3.png" alt="" mode="aspectFit"/>
				</view>
				<!-- 远程会议 end -->
			</view>
			<u-popup
				mode="center"
				:show="showProject" 
				@close="closeProjectPop" 
				:round="50"
			>
				<view class="pop project-pop">
					<view class="title">
						<text>请选择项目</text>
					</view> 
					<view class="body" >
					   <view class="wrapper _scroll">
						 <view class="item" v-for="(item, idx) in projectList" :key="item.id"
						 @click="handleSelectProject(idx)">
							<view 
							:class="`check ${selectedProject.indexOf(idx) !== -1 ? 'check__active' : ''}`" 
							>
								<view class="check-on"></view>
							</view>
							<view class="name">{{item.project_name}}</view>
						 </view>
					   </view>
					</view>
					<view class="custom-button" @click="confirmSelectUser()">
						确认
					</view>
				</view>
			</u-popup>
		</div>
	</view>
</template>

<script>
	import { openPosition } from '@/src/utils/openPosition.js'
	import { mapGetters, mapActions } from 'vuex';
	import tabbar from '@/components/tabbar/index.vue'
	import { projectSelectListApi } from '@/api/project.js'
	export default {
		components: { tabbar },
		data() {
			return {
				projectList: [],
				selectedProject: [0],
				showProject: false,
				curAddress: '',
				longitude: '',
				latitude: '',
				recommendId: ''
			};
		},
		computed: {
			...mapGetters({
					curProject: 'system/getCurProject',
					curRole: 'system/getCurRole',
					userInfo: 'system/getUserInfo',
				})
		},
		methods:{
			...mapActions({
				setCurProject: 'system/setCurProject',
				setCurLocation: 'system/setCurLocation',
			}),
			go(path, check){
				if (check && !this.curProject.id) {
					uni.showToast({
						title: '请先选择项目!',
						icon: 'error'
					})
					return;
				}
				uni.navigateTo({
					url: path
				})
			},
			confirmSelectUser() {
				this.setCurProject(this.projectList[this.selectedProject[0]]);
				this.closeProjectPop();
			},
			handleSelectProject(idx) {
				this.selectedProject=[idx]
			},
			async fetchList() {
				// if (!this.curProject.id) {
				// 	return;
				// }
				let params = {};
				if (this.curRole === '项目经理') {
					params.link_user = this.userInfo.user_name;
				}
				uni.showLoading({title: '加载中...'});
				const { data } = await projectSelectListApi(params);
				uni.hideLoading();
				
				if (data.code === 1) {
					let arr = data.data;
					let min = 999;
					let idx = 0;
					arr.forEach((item, _idx) => {
						const _lat = Math.abs(item.latitude - this.latitude);
						const _lon = Math.abs(item.longitude - this.longitude);
						const total = _lat + _lon;
						if (min > total) {
							min = total;
							idx = _idx
						}
					})
					arr[idx].recommend = true;
					this.selectedProject=[idx];
					this.projectList = arr;
					this.recommendId = this.projectList[idx].id;
					this.setCurProject({...this.projectList[idx], recommend: true});
				}
			},
			async showProjectPop() {
				this.showProject = true;
			},
			closeProjectPop(){
				this.showProject = false
			},
		},
		// onShow() {
		// 	if (this.curRole === '项目经理') {
		// 		this.go('/pages/work/manager/index', false);
		// 	}
		// },
			onTabItemTap(e) {
		   if (this.curRole === '项目经理') {
				 uni.navigateTo({
					 url:'/pages/work/manager/index'
				 })
		    //  this.go('/pages/work/manager/index', false);
		    }
		  },
		onLoad() {
			const _this = this;
			uni.setNavigationBarTitle({
				title: `工作台`
			});
			
			openPosition();
	
			uni.getLocation({
				type: 'gcj02', //返回可以用于uni.openLocation的经纬度
				geocode: true,
				// 用户允许获取定位
				success: function (res) {
					// {
					// 	"type": "gcj02",
					// 	"altitude": 0,
					// 	"latitude": 22.553997,
					// 	"longitude": 113.985856,
					// 	"speed": 0,
					// 	"accuracy": 125,
					// 	"address": {
					// 		"country": "中国",
					// 		"province": "广东省",
					// 		"city": "深圳市",
					// 		"district": "南山区",
					// 		"street": "深云西三路",
					// 		"streetNum": "6号",
					// 		"poiName": "天健科技大厦",
					// 		"cityCode": "0755"
					// 	},
					// 	"errMsg": "getLocation:ok"
					// }
					
					
					let curLoc = {
						longitude: '',
						latitude: '',
						address: '获取中...',
					};
					
					const { address } = res; 
					
					if (address) {
						let curAddress = address.province + address.city + address.district + address.street + address.streetNum + address.poiName
						
						_this.longitude = res.longitude;
						_this.latitude = res.latitude;
						_this.curAddress = curAddress;
						
						curLoc.longitude = res.longitude;
						curLoc.latitude = res.latitude;
						curLoc.address = curAddress
						curLoc.addressInfo = address;
						
					}
					
					_this.setCurLocation(curLoc)
					_this.fetchList();
					
				},
				fail: function(res) {
					_this.fetchList();
				}
			})
		}
	}
</script>

<style scoped lang="scss">
	.tab-space{
		width: 100%;
		height: 140rpx;
	}
	.sectino-0{
		background-color: #2c5cff;
	}
	.content{
		width: 100%;
		background-color: #fff;
		position: relative;
		.pop{
			width: 671rpx;
			padding-bottom: 40rpx;
			background-color: #fff;
			border-radius: 35rpx;
			overflow: hidden;
			.title{
				width: 100%;
				height: 96rpx;
				line-height: 96rpx;
				background-color: #1534ce;
				font-size: 42rpx;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 4rpx;
				color: #ffffff;
				text-align: center;
			}
		}
		.project-pop{
			.body{
				padding: 40rpx 50rpx;
				padding-right: 20rpx;
				.wrapper{
					width: 100%;
					height: 540rpx;
					overflow-y: auto;
					overflow-x: hidden;
				}
				.item{
					width: auto;
					margin-bottom: 20rpx;
					@include clear();
					.check{
						width: 24rpx;
						height: 24rpx;
						border: solid 1rpx #000000;
						border-radius: 50%;
						float: left;
						position: relative;
						top: 7rpx;
						.check-on{
							transition: 0.3s ease;
							opacity: 0;
							transform: scale(0.5);
							border-radius: 50%;
							position: absolute;
							top: 0;
							left: 0;
							right: 0;
							bottom: 0;
							margin: auto;
							width: 18rpx;
							height: 18rpx;
							background-color: #000000;
						}
					}
					.name{
						width: calc(100% - 54rpx);
						float: left;
						height: 40rpx;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
						font-size: 30rpx;
						font-weight: 300;
						font-stretch: normal;
						line-height: 40rpx;
						letter-spacing: 0rpx;
						color: #000000;
						margin-left: 20rpx;
					}
					.check__active{
						.check-on{
							opacity: 1;
							transform: scale(1);
						}
					}
				}
			}
		}
		.tab-outside{
			background-color: #fff;
			.tab-img-wrap{
				border-radius: 49rpx 49rpx 0 0;
				padding-top: 56rpx;
				.tab-img{
					width: 671rpx;
					height: 100rpx;
					margin: 0 auto;
					text-align: center;
					margin-bottom: 40rpx;
					background-color: #0535d6;
					box-shadow: 0rpx 13rpx 35rpx 0rpx 
						rgba(51, 91, 222, 0.42);
					border-radius: 35rpx;
					image{
						width: 671rpx;
						height: 100rpx;
					}
				}
			}
		}
		.address-wrap{
			display: flex;
			justify-content:flex-start;
			align-items: center;
			background:#1c32c5;
			border-radius:49rpx 49rpx 0 0;
			padding:35rpx 40rpx 65rpx;
			.icon-address{
				color:#fff;
				font-size: 27rpx;
			}
			.text{
				font-size:27rpx;
				color:#fff;
				margin-left: 21rpx;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}
		}
		.project-wrap{
			background:#f8f8f7;
			@include clear();
			padding: 35rpx 40rpx 39rpx;
			border-radius: 49rpx 49rpx 0 0;
			margin-top:-35rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.pro-left{
				width: calc(100% - 246rpx);
				.pro-name{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					margin-bottom: 10rpx;
					@include clear();
					text{
						display: inline-block;
						color:#45464a;
						font-size: 26rpx;
						font-weight: bolder;
						margin-right: 10rpx;
						max-width: 320rpx;
						height: 30rpx;
						line-height: 30rpx;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
					}
					view{
						color: #1b31c4;
						font-size: 16rpx;
						border:1rpx solid #1b31c4;
						display: inline-block;
						border-radius:25rpx;
						padding:0 15rpx;
						height: 24rpx;
						margin-top: 2rpx;
						line-height: 24rpx;
					}
				}
				.pro-address-wrap{
					display: flex;
					justify-content:flex-start;
					align-items: center;
					.icon-addresss{
						font-size: 16rpx;
						color:#7f98ae;
					}
					.text{
						font-size: 16rpx;
						color:#7f98ae;
						margin-left: 8rpx;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
					}
				}
			}
			.pro-right{
				width:246rpx;
				display: flex;
				justify-content:center;
				align-items: center;
				width: 246rpx;
				height: 48rpx;
				background-color: #1534ce;
				border-radius: 20rpx;
				.icon-qiehuan{
					font-size: 30rpx;
					color: #fff;
					margin-right: 19rpx;
				}
				text{
					font-size: 26rpx;
					line-height: 49rpx;
					letter-spacing: 11rpx;
					color: #ffffff;
				}
			}
		}
	}
</style>
